<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="<%=basePath%>">
    <base href="<%=request.getContextPath()%>/"/>
    <link rel="stylesheet" href="/webjars/layui/2.5.5/css/layui.css">
    <style>
        .layui-table-cell{
            height: 30px;
        }
    </style>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top: 50px">
        <div class="layui-inline">
            <label class="layui-form-label">所属线路</label>
            <div class="layui-input-inline">
                <select  id="service" name="service" lay-verify="required"  class="select">
                    <option value=" ">--请选择--</option>
                </select>
            </div>
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-inline">
                <select  id="QiYongZhuang"  lay-verify="required"  >
                    <option value=" ">--请选择--</option>
                    <option value="1">启用</option>
                    <option value="2">禁用</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn layui-btn-normal zengJiQxMessage" onclick="ChaXun()">
                    查询
                </button>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-normal zengJiQxMessage" onclick="XinZeng()" style="margin-left:100px">
                    <i class="layui-icon">&#xe608;</i>添加杆台
                </button>
            </div>
        </div>
    </div>
</form>

    <div class="layui-container" style="width:100%;margin-top:50px ">
        <table id="AttTb" lay-filter="AttTb" lay-data="AttTb"></table>
    </div>

<!--增加-->
<div id="add" style="display: none" class="layui-form-item">
    <form class="layui-form" lay-filter="addForm"  action="" method="post">
        <div class="layui-form-item" style="margin-top: 20px">
            <label class="layui-form-label">杆台编号:</label>
            <div class="layui-input-block">
                <input type="text" name="poleCode" style="width: 150px" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-block">
                <input type="radio" name="isStart" value="1" title="启用" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>启用</div></div>
                <input type="radio" name="isStart" value="2" title="停用"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>停用</div></div>
            </div>
        </div>
    </form>
</div>

<!--修改-->
<div id="update" style="display: none" class="layui-form-item">
    <form class="layui-form" lay-filter="updateForm"  action="" method="post">
        <div class="layui-form-item" style="margin-top: 20px">
            <div class="layui-input-block">
                <input type="hidden" name="id" style="width: 150px" class="layui-input">
            </div>
            <label class="layui-form-label">杆台编号:</label>
            <div class="layui-input-block">
                <input type="text" name="poleCode" style="width: 150px" class="layui-input">
            </div>
        </div>
    </form>
</div>

    <script src="/webjars/layui/2.5.5/layui.js" charset="utf-8"></script>
    <script type="text/html" id="caozuo">
        <div class="layui-input-block" style="margin-left: 0px">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="margin-left:20px" lay-event="update" >修改</button>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="del">删除</button>
        </div>
    </script>
    <script type="text/html" id="qiyong">
        <div class="layui-input-block" style="margin-left: 0px">
            <!--value={{d.isStart}} -->
            <input type="checkbox" lay-skin="switch"   lay-filter="switchTest" value="{{d.id}}" lay-text="已启用|已禁用" {{ d.isStart=="1"?"checked":""}}>
        </div>
    </script>
    <script>
        layui.use("table",function () {
            let form = layui.form;
            let $ = layui.$;
            let table = layui.table;
            table.render({
                id: "AttTb",
                elem: "#AttTb",
                url: "/GanTaiGuanLi/GanTaiCha",
                cols: [
                    [
                        {title: "编号", field: "id", hide: true},
                        {title: "杆塔编号", field: "poleCode"},
                        {title: "所属线路", field: "lineName"},
                        {title: "启动状态", templet: "#qiyong"},
                        {title: "操作", templet: "#caozuo"}
                    ]
                ],
                page: {
                    limit: 4,
                    limits: [4, 8, 12]
                }

            })

            form.on('switch(switchTest)',function(data){
                let articleState = this.checked ? '1' : '2';
                let rowId=data.value;
                data.value=articleState;
                let a=this.checked;
                $.post("/GanTaiGuanLi/qxZhuAngTaiGai",{"id":rowId,"zhuAngTai":articleState})
                    .done(
                        result=>{

                            layer.msg(result.msg,{icon:6})
                        })
            });

            table.on("tool(AttTb)",function ({data,event}) {
                switch (event) {
                    case "update":
                        update(data)
                        break;
                    case "del":
                        del(data.id);
                        break;
                }
            })
            /*下拉框赋值*/
            $.ajax({
                url:"/GanTaiGuanLi/XiaLaKuang",
                dataType: 'json',
                success: function(data) {
                    if (data!== null) {
                        $("#service").empty();
                        $("#service").append(new Option("--请选择--", " "));
                        $.each(data, function(index, item) {
                            console.log(item.lineName)
                            $('#service').append(new Option(item.lineName,item.id));
                        });
                    } else {
                        $("#service").append(new Option("暂无数据", ""));
                    }
                    //重新渲染
                    form.render("select");
                }
            })
        })

        function XinZeng() {
            layui.use(["layer","form","jquery","table"],function () {
                let layer=layui.layer;
                let $=layui.jquery;
                $("#add>form")[0].reset();
                layer.open({
                    type:1,
                    title:"添加杆台",
                    area:["300px","250px"],
                    btn:["确定","取消"],
                    content:$("#add"),
                    yes(){
                        let params=layui.form.val("addForm");
                        console.log(params)
                        $.post("/GanTaiGuanLi/add",params)
                            .done(({msg})=>{
                                layer.close(layer.index);
                                layui.table.reload("AttTb");
                                layer.msg(msg);
                            })
                    }
                })
            })
        }

        function del(c) {
            layui.use(["jquery","layer","form","table"],function () {
                let $=layui.$;
                let table=layui.table;
                let layer=layui.layer;
                console.log(c)
                layer.confirm("确认删除吗",{title:"删除确认"},function (index) {
                    $.post("/GanTaiGuanLi/del",{id:c},
                        function (c) {
                            if(c.msg=="成功"){
                                alert("删除成功")
                                layer.close(layer.index);
                                table.reload('AttTb',{
                                    url: '/GanTaiGuanLi/GanTaiCha'
                                    ,page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            }else {
                                alert("删除失败")
                            }
                        })
                })

            });
        }

        function update(data) {
            layui.use(["jquery","layer","form","table"],function () {
                let layer=layui.layer;
                let $=layui.$;
                let table=layui.table;

                // let popup = layui.popup;
                // console.log("你是个啥？？")
                // $("#biao1")[0].reset();
                layui.form.val("updateForm",data)
                console.log(data+"aa")
                table.reload('AttTb',{
                    url: '/GanTaiGuanLi/GanTaiCha'
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                layer.open({
                    type:1,
                    title:"修改用户",
                    area:["300px","200px"],
                    btn:["确定","取消"],
                    content:$("#update"),
                    yes(){
                        let params=layui.form.val("updateForm");
                        console.log(params+"aa")
                        $.post("/GanTaiGuanLi/PsPIUpdate",params,function (c) {
                            if(c.msg=="修改成功"){
                                alert("修改成功")
                                table.reload("AttTb")
                                layer.close(layer.index);
                                layer.msg(msg);
                            }else {
                                alert("修改失败")
                            }
                        })
                    }
                })

            });
        }

        function ChaXun() {
            layui.use(['form','layedit', 'laydate','table','jquery'], function(){
                var $ = layui.$;
                let lineId=$("#service").val();
                let isStart=$("#QiYongZhuang").val();
                console.log(lineId)
                console.log(isStart)

                let where={lineId,isStart,curr:1};
                layui.table.reload("AttTb",{where});
            });
        }
    </script>
</body>
</html>